/**
 * 图标重复显示问题修复样式
 * @author Wu.Liang
 * @date 2025-01-30
 * @description 解决u-icon组件与iconfont字体图标冲突导致的重复显示问题
 */

// 1. 修复u-icon组件的样式隔离
.u-icon {
  // 确保u-icon组件有正确的样式隔离
  line-height: normal !important;
  display: inline-block !important;
  vertical-align: middle !important;
  
  // 防止伪元素重复
  &::before,
  &::after {
    content: none !important;
  }
  
  // 确保内部元素正确显示
  .u-icon__icon {
    line-height: normal !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }
}

// 2. 修复iconfont与u-icon的冲突
.iconfont {
  // 确保iconfont不会影响u-icon组件
  &:not(.u-icon) {
    font-family: 'iconfont', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: baseline;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

// 3. 防止全局样式影响图标组件
[class*="u-icon"] {
  // 重置可能影响图标显示的全局样式
  line-height: normal !important;
  display: inline-block !important;
  vertical-align: middle !important;
  
  // 防止伪元素干扰
  &::before,
  &::after {
    content: none !important;
  }
}

// 4. 修复服务卡片中的图标显示
.service-icon {
  .u-icon {
    // 确保服务图标正确显示
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

// 5. 修复公告和活动列表中的图标
.announcement-icon,
.activity-image-placeholder {
  .u-icon {
    // 确保列表图标正确显示
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

// 6. 防止emoji修复工具影响u-icon
.emoji-text {
  // 确保emoji文本不会影响u-icon组件
  &:not(.u-icon) {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Android Emoji", "EmojiSymbols", sans-serif !important;
  }
}

// 7. 修复可能的样式继承问题
* {
  // 防止通用选择器影响图标组件
  &:not([class*="u-icon"]):not(.iconfont) {
    // 不应用可能影响图标的样式
  }
}

// 8. 确保图标容器正确显示
.icon-container {
  .u-icon {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

// 9. 修复可能的字体加载问题
.font-loading {
  .u-icon {
    opacity: 0.8;
    transition: opacity 0.3s ease;
  }
}

.font-loaded {
  .u-icon {
    opacity: 1;
  }
}

// 10. 响应式修复
@media (max-width: 480px) {
  .u-icon {
    // 小屏幕下的图标优化
    font-size: inherit !important;
  }
}

// 11. 调试模式样式（开发时使用）
.debug-icon {
  .u-icon {
    border: 1px solid red !important;
    background: rgba(255, 0, 0, 0.1) !important;
  }
}

// 12. 强制重置可能的问题样式
.u-icon,
[class*="u-icon"] {
  // 强制重置所有可能影响图标显示的样式
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  outline: none !important;
  text-decoration: none !important;
  list-style: none !important;
  
  // 确保字体正确
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  font-style: inherit !important;
  color: inherit !important;
  
  // 确保布局正确
  position: relative !important;
  z-index: auto !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}